import React, { useState } from "react";
import ReactEcharts from "echarts-for-react";
import ChartsWrap from "components/charts/chartsWrap";
import RangeDrawer from "./rangeDrawer";
import config from "src/config";

const filterChartData = (nationalData, range) => {
  let legendData = [],
    xAxisData = [],
    seriesData = [],
    rangeData = [];
  for (let key in nationalData) {
    const data = nationalData[key];
    const dataList = [...data.dataList];
    dataList.reverse((a, b) => a - b);
    legendData.push(data.name);
    seriesData.push({
      name: data.name,
      type: "bar",
      data: dataList.map(item => item.data.data).filter(item => item)
      // label: {
      //   show: true,
      //   position: "insideBottom",
      //   distance: 15,
      //   align: "left",
      //   verticalAlign: "middle",
      //   rotate: 90,
      //   formatter: "{c}  {name|{a}}",
      //   fontSize: 16,
      //   rich: {
      //     name: {
      //       textBorderColor: "#fff"
      //     }
      //   }
      // }
    });
    if (xAxisData.length === 0) {
      rangeData = dataList
        .filter(item => item.data.data)
        .map(item => item.code.slice(-4) + "年");
      if (range) {
        dataList.forEach(item => {
          let year = parseInt(item.code.slice(-4));
          if (year >= range[0] && year <= range[1]) {
            xAxisData.push(year + "年");
          }
        });
      } else {
        xAxisData =
          rangeData.length > 4
            ? rangeData.slice(rangeData.length - 5)
            : rangeData.slice(0, rangeData.length);
      }
    }
  }

  return {
    legendData,
    xAxisData,
    seriesData,
    rangeData
  };
};

const HorizontalLineChart = ({
  title = "数据展示",
  name = "",
  nationalData = {}
}) => {
  // 切换主题
  const [theme, changeTheme] = useState("walden");
  const handleChangeTheme = () => {
    const themes = config.themes;
    const index = themes.indexOf(theme);
    if (index >= themes.length - 1) {
      changeTheme(themes[0]);
    } else {
      changeTheme(themes[index + 1]);
    }
  };

  // 范围选择模态框
  const [visibale, changeVisibale] = useState(false);
  const [range, changeRange] = useState(null);
  const handleChangeRange = value => {
    changeVisibale(false);
    changeRange(value);
  };

  // 计算得到需要的数据
  const { seriesData, legendData, xAxisData, rangeData } = filterChartData(
    nationalData,
    range
  );
  const getOption = () => {
    return {
      title: {
        show: false,
        text: "世界人口总量",
        subtext: "数据来自网络"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      legend: {
        type: "scroll",
        data: legendData,
        top: 30
      },
      grid: {
        top: 90,
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      toolbox: {
        feature: {
          magicType: {
            type: ["stack", "tiled"]
          },
          mytool1: {
            title: "显示范围",
            onclick: function() {
              changeVisibale(true);
            },
            icon:
              "path://M972.8 750.08H714.24c-9.216 0-16.896-7.68-16.896-16.896 0-9.216 7.68-16.896 16.896-16.896H972.8c9.216 0 16.896 7.68 16.896 16.896 0 9.728-7.168 16.896-16.896 16.896z m0-140.288H714.24c-9.216 0-16.896-7.68-16.896-16.896 0-9.216 7.68-16.896 16.896-16.896H972.8c9.216 0 16.896 7.68 16.896 16.896 0 9.728-7.168 16.896-16.896 16.896zM859.136 250.368l-291.328 271.36v424.96c0 9.216-7.68 16.896-16.896 16.896-9.216 0-16.896-7.68-16.896-16.896v-422.4c-3.584-6.656-2.048-14.336 3.072-19.968l241.664-225.28h-2.56l45.568-45.568c8.192-5.632 15.36-12.288 20.992-20.992l1.024-1.024h-0.512c7.168-11.264 11.776-24.576 11.776-39.424 0-40.448-32.768-72.704-73.216-72.704H140.288v0.512c-37.888 3.072-67.584 34.304-67.584 72.704 0 14.336 4.096 28.16 11.776 39.424h-0.512l0.512 0.512c6.144 9.728 14.848 17.408 24.576 23.04l75.776 71.68h1.024l147.968 135.68c1.024 1.024 1.536 2.048 2.56 3.072 4.096 3.072 6.656 7.68 6.656 13.312v314.368c0 9.216-7.68 16.896-16.896 16.896-9.216 0-16.896-7.68-16.896-16.896v-307.2L84.992 259.584c-27.648-19.456-45.568-51.2-45.568-87.552 0-55.808 43.008-101.376 97.28-105.984 1.024-0.512 2.56-0.512 3.584-0.512h646.656c1.536 0 2.56 0 3.584 0.512 54.784 4.608 97.28 50.688 97.28 105.984 0 25.6-9.216 49.664-24.576 68.096 0.512 3.584-1.024 7.168-4.096 10.24zM714.24 867.84H972.8c9.216 0 16.896 7.68 16.896 16.896 0 9.216-7.68 16.896-16.896 16.896H714.24c-9.216 0-16.896-7.68-16.896-16.896 0-9.216 7.68-16.896 16.896-16.896z"
          },
          saveAsImage: {
            show: true,
            name: title
          },
          restore: {}
        }
      },
      xAxis: {
        type: "value",
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: "category",
        data: xAxisData
      },
      series: seriesData
    };
  };

  return (
    <ChartsWrap title={title} handleClick={handleChangeTheme} text="切换主题">
      <RangeDrawer
        rangeData={rangeData}
        changeVisibale={changeVisibale}
        visibale={visibale}
        callback={handleChangeRange}
      />
      <ReactEcharts theme={theme} option={getOption(nationalData)} />
    </ChartsWrap>
  );
};

export default HorizontalLineChart;
